<template>
	<view>
		<np-navbar backState="2000" :bgColor="bgColor" :bgColorAngle="90" fontColor="#FFFFFF" type="fixed" title="超级搜">
			<view slot="view">
				<view class="search-header">
					<view class="np-search-box">
						<text class="np-search-icon npIcon-search"></text>
						<input class="np-search-input" placeholder-class="np-search-placeholder" v-model="searchKey" @confirm="inputConfirm" type="text"
						 placeholder="输入标题或关键字搜索" confirm-type="search"></input>
						<text v-show="searchKey" class="np-delete-icon npIcon-backdelete" @click="delKey"></text>
					</view>
					<view class="np-search-submit" @click="inputConfirm">搜 索</view>
				</view>
			</view>
		</np-navbar>
		<view class="top-height">
			<np-div :size="28" :bold="true" color="#333" width="50%">我的足迹</np-div>
			<np-list-one :goodsList="list"></np-list-one>
		</view>
		<!-- #ifdef H5 -->
		<np-tabbar path="/pages/tabbar/search"></np-tabbar>
		<!-- #endif -->
	</view>
</template>

<script>
	import base from '@/common/base.js'
	export default {
		mixins: [base],
		data() {
			return {
				showBackIcon: true,
				bgColor: ['#9000ff', '#5e00ff'],
				searchKey: "",
				list:[]
			}
		},
		onShow() {
			this.list = this.$config.get("GOODSITEM");
		},
		methods:{
			inputConfirm(){
				if (!this.searchKey) {
					return;
				}
				uni.navigateTo({
					url: "/pages/search/search?keyword=" + this.searchKey
				});
			},
			delKey() {
				this.searchKey = '';
			}
		}
	}
</script>

<style>
	.search-header {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		width: 750rpx;
		padding: 50rpx;
	}
	
	.np-search-box {
		background-color: #fff;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
		width: 78%;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		padding: 0 9px;
		display: flex;
		align-items: center;
	}
	
	.np-search-icon {
		width: 29rpx;
		height: 28rpx;
		font-size: 28rpx;
		margin-right: 10rpx;
	}
	
	.np-search-input {
		width: 100%;
		height: 38px;
		font-size: 28rpx;
		color: #666;
	}
	
	.np-search-placeholder {
		line-height: 38px;
		font-size: 28rpx;
	}
	
	.np-delete-icon {
		font-size: 20px;
		color: #FF0000;
		width: 70upx;
		margin-left: 30rpx;
	}
	
	.np-search-submit {
		height: 40px;
		line-height: 40px;
		padding: 0 25rpx;
		background: #ffb925;
		color: #fff;
		text-align: center;
		border-top-right-radius: 20px;
		border-bottom-right-radius: 20px;
		font-size: 32rpx;
	}
	
	.top-height {
		margin-top: 200rpx;
	}
</style>
